<template>
  <div :class="className">
    <!-- style -->
    <div v-html="css"></div>
    <div class="b_good">
      <div class="desTitle" v-if="isLoc" style="margin-left: 1.4rem">附近的店铺</div>
      <div class="list" v-for="(items, index) in listData" :key="index" @click="to_self_bartending_store(items)">
        <div class="lis">
          <div class="lis_img">
            <img :src="items.logo_url" alt="" />
          </div>
          <div class="lis_right">
            <div class="lis_right_title">{{ items.name }}</div>
            <div class="score-box">
              <span class="orderTotal">已售{{ items.sales }}单</span>
            </div>
            <div class="category-list" v-if="items.has_many_cate.length">
              <div class="classify" v-for="(citem, cindex) in items.has_many_cate" :key="cindex" v-if="cindex < 3">
                <span>{{ citem.name }}</span>
              </div>
            </div>
            <div class="discounts-distance">
              <div class="dispatch-box" style="padding: 0; color: #00001c">
                <template>{{ items.full_address }}</template>
              </div>
              <div class="score-right">{{ items.distance }}<i class="iconfont icon-all_daohang"></i></div>
            </div>
            <div class="dispatch-boxa" style="overflow-x: auto">
              <div v-for="dispatch in items.dispatch_arr" class="dispatch-item" :key="dispatch" style="flex-shrink: 0">{{ dispatch }}</div>
            </div>
            <div class="discount-box">
              <div class="discount-item" v-if="items.has_many_coupon && items.has_many_coupon.length > 0">
                <span class="red">优惠</span>
                <div class="con-list">
                  <span style="margin-left: 0.5rem" v-for="(coupon, index) in items.has_many_coupon" :key="index" v-if="index <= 2">{{ coupon.name }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 商品 -->
        <div class="goods" v-if="datas.show_goods && items.has_many_goods && items.has_many_goods.length > 0">
          <div class="goods-list">
            <div class="goods-one" v-for="(good, i) in items.has_many_goods" :key="i" @click.stop="toGood(good.id)">
              <div class="goods-image">
                <img v-lazy="good.thumb" alt="" />
              </div>
              <div class="goods-title">{{ good.title }}</div>
              <div class="price">{{ $i18n.t("money") }}{{ good.vip_level_status && good.vip_level_status.status == 1 ? good.vip_level_status.word : good.price }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="loading-box" style="line-height: 3rem;" v-if="page < total_page" @click="getMoreData">
      {{ $i18n.t("加载更多") }}
    </div>
  </div>
</template>
<script>
const css = function() {
  if (this.datas) {
    if (this.component_key == "U_Bartending") {
      let {
        preview_color,
        font_size,
        font_color,
        tag_border_color,
        tag_border_radius,
        tag_bg_color,
        tag_font_color,
        tag_font_size,
        border_radius,
        class_font_size,
        class_font_color,
        class_bg_color,
        class_border_radius,
        discount_font_size,
        location_font_color,
        location_font_size,
        discount_font_color
      } = this.datas;
      return `
        .component-${this.id} .b_good .list{
          background-color: ${preview_color};
        }
        .component-${this.id} .b_good .list .lis .lis_right_title {
          font-size: ${font_size}px;
          color: ${font_color};
        }
        .component-${this.id} .b_good .list .lis .lis_img {
          border-radius: ${border_radius}px;
        }
        .component-${this.id} .b_good .list .lis .lis_right .category-list .classify{
          font-size: ${class_font_size}px;
          color: ${class_font_color};
          background: ${class_bg_color};
          border-radius: ${class_border_radius}px;
        }
        .component-${this.id} .b_good .list .lis .lis_right .discounts-distance .score-right{
          color: ${location_font_color};
          font-size: ${location_font_size}px;
        }
        .component-${this.id} .b_good .list .lis .lis_right .discount-box .discount-item .con-list span{
          font-size: ${discount_font_size}px;
          color: ${discount_font_color};
        }
        .component-${this.id} .b_good .list .lis .lis_right .dispatch-boxa .dispatch-item {
          color: ${tag_font_color};
          font-size: ${tag_font_size}px;
          border-radius: ${tag_border_radius}px;
          border: solid 1px ${tag_border_color};
          background:${tag_bg_color};
        }
      `;
    }
  }
};
export default {
  props: ["datas", "component_key", "component_title", "page_id", "id", "isBottom", "lastIndex", "index", "isLast"],
  data() {
    return {
      lat: "",
      lng: "",
      city: "",
      listData: [],
      page: 1,
      total_page: 0,
      isLoadMore: false
    };
  },
  components: {},
  computed: {
    css() {
      return "<style>" + css.call(this) + "</style>";
    },
    className() {
      const name = ["component-wrapper", `component-${this.id}`];
      return name;
    }
  },
  watch: {
    isBottom: function(nval, oval) {
      if (nval && this.lastIndex == this.index) {
        if (this.isLoadMore) {
          this.getMoreData();
        }
      }
    }
  },
  mounted() {
    this.fun
      .getLocation()
      .then(res => {
        console.log(res, res.city);
        this.lat = res.point.lat;
        this.lng = res.point.lng;
        this.city = res.city;
        this.init();
        this.getData();
      })
      .catch(err => {
        this.init();
        this.getData();
      });
  },
  methods: {
    toGood(id) {
      this.$router.push(this.fun.getUrl("goods", { id: id }));
    },
    to_self_bartending_store(item) {
      this.$router.push(this.fun.getUrl("self_bartending_store", { store_id: item.id }));
    },
    init() {
      this.page = 1;
      this.listData = [];
      this.total_page = 0;
    },
    async getData() {
      let json = {
        lat: this.lat,
        lng: this.lng,
        show_goods: this.datas.show_goods
      };
      if (this.datas.goods_type == "bartending_category") {
        json.category_id = this.datas.category_id;
        let cate = [];
        cate = this.datas.list.map(item => {
          return item.id;
        });
        json.cate_id = cate;
      }
      let { data, msg, result } = await $http.post("plugin.self-bartending.api.member.store.index", json, "");
      if (result) {
        this.listData = data.data;
        this.total_page = data.last_page;
        this.isLoadMore = true;
        if (!this.total_page) {
          this.total_page = 0;
        }
      } else {
        this.$toast(msg);
      }
    },
    async getMoreData() {
      if (!this.isLoadMore) return;
      this.isLoadMore = false;
      if (this.page >= this.total_page) {
        return;
      } else {
        this.page = this.page + 1;
        let json = {
          lat: this.lat,
          lng: this.lng,
          page: this.page,
          show_goods: this.datas.show_goods
        };
        if (this.datas.goods_type == "bartending_category") {
          json.category_id = this.datas.category_id;
          let cate = [];
          cate = this.datas.list.map(item => {
            return item.id;
          });
          json.cate_id = cate;
        }
        let { data, msg, result } = await $http.post("plugin.self-bartending.api.member.store.index", json, "");
        if (result) {
          this.listData = this.listData.concat(data.data);
        } else {
          this.$toast(msg);
        }
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.desTitle {
  font-weight: bold;
  font-size: 1.06rem;
  color: #00001c;
  margin-left: 0.75rem;
  text-align: left;
  margin-bottom: 0.81rem;
  margin-top: 0.25rem;
}
.list {
  margin: 0.75rem;
  border-radius: 0.5rem;
  overflow: hidden;
  box-sizing: border-box;
  .lis {
    padding: 0.75rem;
    padding-bottom: 0;
    box-sizing: border-box;
    display: flex;
    .lis_right {
      flex: 1;
      text-align: left;
      .lis_right_title {
        font-weight: bold;
        font-size: 1.06rem;
        color: #00001c;
        margin-bottom: 0.53rem;
      }
      .score-box {
        display: flex;
        align-items: center;
        font-size: 0.75rem;
        color: #f96d20;
        .orderTotal {
          color: #000;
          // margin-left: 0.5rem;
        }
      }
      .category-list {
        margin-top: 0.59rem;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;

        .classify {
          display: flex;
          align-items: center;
          justify-content: center;
          background: #fff0e8;
          border-radius: 0.25rem;
          font-size: 0.69rem;
          color: #f96d20;
          margin-right: 0.5rem;
          padding: 0.22rem 0.28rem;
          box-sizing: border-box;
        }
      }
      .discounts-distance {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        margin-top: 0.2rem;

        .score-right {
          color: #00001c;
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-left: 0.2rem;

          i {
            font-size: 25px;
            color: #f15353;
          }
        }

        .dispatch-box {
          display: flex;
          flex-wrap: wrap;
        }
      }
      .dispatch-boxa {
        display: flex;
        padding: 0.3rem 0 0.5rem 0;

        .dispatch-item {
          margin-right: 0.4rem;
          padding: 0.1rem 0.3rem;
          color: #00001c;
          border-radius: 0.25rem;
          border: solid 0.025rem #d6d6dc;
        }
      }
      .discount-box {
        display: flex;
        flex-direction: column;

        .red {
          // color: #ff2c29;
          font-weight: 400;
          white-space: nowrap;
        }

        .discount-item {
          margin-bottom: 0.2rem;
          color: #f15353;
          display: flex;
          align-items: flex-start;

          .con-list {
            display: flex;
            flex-wrap: wrap;
            font-weight: 500;
          }
        }
      }
    }
    .lis_img {
      width: 4.5rem;
      height: 4.5rem;
      background: #c19b7f;
      border-radius: 0.5rem;
      margin-right: 0.38rem;
      img {
        width: 100%;
        height: 100%;
        border-radius: 0.5rem;
      }
    }
  }
}
.list:last-child {
  margin-bottom: 0;
}
.goods {
  width: 100%;
  font-size: 12px;
  padding-top: 10px;
  padding-bottom: 10px;
  box-sizing: border-box;
  padding-right: 0.35rem;

  .goods-list {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    width: 100%;
    overflow-x: scroll;
    margin-left: 10px;

    .goods-one {
      margin-right: 10px;
      width: 90px;

      .goods-image {
        width: 90px;
        height: 90px;
        border-radius: 5px;

        img {
          width: 100%;
          height: 100%;
          border-radius: 5px;
        }
      }

      .goods-title {
        margin: 3px 0 2px 0;
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: #00001c;
        font-weight: 500;
        font-size: 14px;
      }

      .price {
        color: #f15353;
        font-weight: bold;
        font-size: 13px;
      }
    }

    /* 门店拼团 */
    .show_price_box {
      display: flex;
      flex-wrap: wrap;
    }

    .show_price {
      font-size: 11px;
      color: #f15353;
      border: solid #f15353 1px;
      padding: 1px 4px;
      margin-top: 5px;
      border-radius: 4px;
    }

    .red_white {
      color: #fff;
      background: #f15353;
      margin-right: 5px;
    }

    .white_red {
      color: #f15353;
      background: #fff;
    }

    /* 门店拼团 */
  }
}
</style>
